<template>
	<view class="content">
		<map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"></map>
	</view>
</template>

<script>
	const img = '@/static/login.png';

	export default {
		data() {
			return {
				latitude: 39.905499,
				longitude: 116.392884,
			}
		},
		onReady() {
			this._mapContext = uni.createMapContext("map", this);

			// 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
			this._mapContext.initMarkerCluster({
				enableDefaultStyle: false,
				zoomOnClick: true,
				gridSize: 60,
				complete(res) {
					console.log('initMarkerCluster', res)
				}
			});

			this._mapContext.on("markerClusterCreate", (e) => {
				console.log("markerClusterCreate", e);
			});

			this.addMarkers();

		},
		methods: {
			addMarkers() {
				const positions = [{
					latitude: 23.099994,
					longitude: 113.324520,
				}, {
					latitude: 23.099994,
					longitude: 113.322520,
				}, {
					latitude: 23.099994,
					longitude: 113.326520,
				}, {
					latitude: 23.096994,
					longitude: 113.329520,
				}]

				const markers = [{
						id: 0,
					latitude: 39.905499,
					longitude: 116.392884,
						width: 20, //宽
						height: 30, //高
						//   title:'我在这里',//标注点名
						alpha: 0.5, //透明度
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '人民大会堂', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#e51860', //背景颜色
							display: 'ALWAYS', //常显
							}
						} //文本
					]

					positions.forEach((p, i) => {
						markers.push(
							Object.assign({}, {
								id: i + 1,
								// iconPath: img,
								width: 50,
								height: 50,
								joinCluster: true, // 指定了该参数才会参与聚合
								label: {
									width: 50,
									height: 30,
									borderWidth: 1,
									borderRadius: 10,
									bgColor: '#ffffff',
									content: `label ${i + 1}`
								}
							}, p)
						)
					})
					this._mapContext.addMarkers({
						markers,
						clear: false,
						complete(res) {
							console.log('addMarkers', res)
						}
					});
					this._mapContext.moveToLocation ({
						latitude: 39.905499,
						longitude: 116.392884,
						success(res){
							console.log('moveToLocation',res);
						}
					})
				}
			}
		}
</script>

<style lang="less">
	.content {
		flex: 1;

	}

	#map {
		height: 50vh;
		width: 100vw;
	}

	.map {
		flex: 1;
	}
</style>